<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>系统管理-图片管理</title>
  <link rel="stylesheet" href="/tuyin/lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="/tuyin/lib/bootstrap-validator/css/bootstrapValidator.css">
  <link rel="stylesheet" href="/tuyin/lib/nprogress/nprogress.css">
  <link rel="stylesheet" href="/tuyin/css/common.css">
  <link href="/tuyin/lib/lightbox2-master/dist/css/lightbox.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/tuyin/lib/imgUp/imgUp/css/index.css">
</head>
<?php
use yii\helpers\Html;
use yii\bootstrap\Modal;
use yii\helpers\Url;
$IMAGE_PATH = \app\models\Image::UPLOAD_PATH;
$order=isset($_GET['order'])?$_GET['order']:'uptime desc';

?>
<style>


  .username{

    margin-right: 10px;

  }
  .brand{

    height: 50px;
    background-color: #367fa9;
  }


  .nav{
    margin-top: 20px; 
  }



  .picbox {
    margin-top: 20px;
  }

  .picbox>ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }

  .picbox>ul li {
    text-align: center;
    width: 18%;
    position: relative;
    margin-right: 2.5%;
  }

  .picbox>ul li:nth-child(5n) {
    margin-right: 0;
  }

  .picbox>ul li>a>img {
    width: 100%;


  }

  .imginfo {
    margin-top: 10px;
    position: relative;
  }


  .img_box img {
    position: relative;
  }

  #progress>.bar {
    height: 18px;
    background: green;
    position: absolute;
    right: 0;
    top: 0;
  }

  .downloadcheckbox {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 18px;
    height: 18px;
    padding: 0;
  }


  /* 解决按钮点击后 外面的边框  */

  .btn:focus,
  .btn:active:focus,
  .btn.active:focus,
  .btn.focus,
  .btn:active.focus,
  .btn.active.focus {
    outline: none;
  }

  .choosepic {
    padding: 0 15px;
  }

  .choosepic>ul li {
    height: 40px;
    /* line-height: 40px; */
    box-sizing: border-box;
  }

  .choosepic>ul li:nth-child(4) {
    /* margin-right: 65%; */
    position: absolute;
    right: 5%;
  }

  .nav-pills .dropdown .dropdown-menu {
    min-width: 120px;
  }

  .nav-pills .dropdown .dropdown-menu li {
    box-sizing: border-box;
  }

  .choosepic>ul li label {
    margin-bottom: 0;
    vertical-align: middle
  }

  #chooseAll {
    vertical-align: middle;
    margin: 0;
    height: 20px;
  }


  .sort {
    padding-left: 30px;
  }



  /* 修改 */
  .modal-add {
    width: 1000px;
  }

  .fl{
    float: left;
  }

  .clearfix:after{  
    content: '';
    display: block;
    clear: both;
}

.upimg-div{
  display: flex;
  justify-content: flex-start;
  align-content: center;
}
.up-section{
  width: 20% !important;
  
}
.check-p {
  margin-bottom: 0px;
}
  /* 隐藏属性 */

  .hide {
    display: none;
  }

  .show {
    display: block;
  }
</style>

<body>
  <div class="lt_aside">
    <div class="brand">
    </div>
    <div class="nav">
      <ul>
        <li>
          <a href="javascript:;">
            <span class="glyphicon glyphicon-list"></span>
            图片管理
          </a>
          <div class="child" style="display: block" ;>
            <a href="/image">图片列表</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="lt_main">
    <div class="lt_topbar">
      <a href="javascript:;" class="pull-left icon_menu">
        <span class="glyphicon glyphicon-align-justify"></span>
      </a>
      <a href="javascript:;" class="pull-right icon_logout">
        <span class="username">管理员</span>
        <span class="glyphicon glyphicon-log-out"></span>
      </a>
    </div>


    <div class="container-fluid">
      <ol class="breadcrumb">
        <li>
          <a href="#">管理系统</a>
        </li>
        <li>
          <a href="#">图片管理</a>
        </li>
        <li class="active">图片列表</li>
      </ol>

      <div class="lt_content">
       <?= Html::a('新增图片', '#', [
            'data-toggle' => 'modal',
            'data-target' => '#create-picture-modal',
            'class' => 'btn btn-success btn-sm',
            'id' => 'data-picture-create',
        ]); ?>
<!--        <button class="btn btn-default mb_20 btn_add">添加图片</button>-->


        <div class="row choosepic">
          <ul class="nav nav-pills">
            <li role="presentation">
              <a href="javascript:;">选择图片</a>
            </li>
            <li role="presentation">
              <a href="javascript:;">
                <label for="allchoose">全选</label>
                <input type="checkbox" id="chooseAll">
              </a>
            </li>
            <li role="presentation">
                <form style="display:none" class="image-form-main" method="post" action="/image/pack-down">
                  
                     <input type="submit" value="提交"/>
                  
                </form>
              <a href="javascript:;" id="startdownload" class="hide">
                打包下载
              </a>
            </li>
            <li role="presentation" class="dropdown sortoption">
              <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false">
                 <span class="sortcase">排序方式</span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="javascript:;" data-sort="uptime asc">上传时间正序</a>
                </li>
                <li>
                  <a href="javascript:;" data-sort="uptime desc">上传时间倒序</a>
                </li>
              </ul>
          </ul>
        </div>
        <!-- 图片信息的表格 -->
        <div class="picbox">
          <ul class="piclist">
              <?php foreach($list as $item){ ?>
            <li>
              <a href="<?= $IMAGE_PATH.$item['imgurl'] ?>" data-lightbox="<?= $item['imgurl'] ?>" data-title="<?= $item['original_image'] ?>">
                  <img  src="<?= $IMAGE_PATH.$item['imgurl'] ?>" alt="" data-original="<?= $IMAGE_PATH.$item['imgurl'] ?>">
              </a>
              <div class="imginfo">
                  <p>名称:<?= $item['original_image'] ?></p>
                <span>上传日期:<?= date('Y-m-d',$item['uptime']) ?></span>
                <input type="checkbox" class="downloadcheckbox"   data-src="<?= $item['imgurl'] ?>">
              </div>
            </li>
              <?php } ?>
          
          </ul>
        </div>
        <!-- 盒子的讲究 -->
        <div class="text-right">
          <ul id="paginator"></ul>
        </div>

      </div>
    </div>
  </div>


  <!-- 退出登录的模态框 -->
  <!-- role aria sr-only:这些类可以删除 -->
  <div class="modal fade" tabindex="-1" id="logoutModal">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            <span>&times;</span>
          </button>
          <h4 class="modal-title">温馨提示</h4>
        </div>
        <div class="modal-body">
          <p class="text-danger">
            <span class="glyphicon glyphicon-info-sign"></span>
            您确定要退出后台管理系统吗？
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary btn_logout">退出</button>
        </div>
      </div>
    </div>
  </div>


  <!-- 添加图片的模态框 -->
  <div class="modal fade" tabindex="-1" id="secondModal">
    <div class="modal-dialog modal-lg modal-add">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            <span>&times;</span>
          </button>
          <h4 class="modal-title">上传图片</h4>
        </div>
      
          <form id="form" method="POST"  action="/image/upload2" enctype="multipart/form-data">
          <div class="modal-body">
            <div class="form-group img_box">
              <div class="img-box full">
                <section class="img-section">
                  <p class="up-p">提示：
                    <span class="up-span">最多可以上传5张图片，马上上传</span>
                  </p>
                  <div class="z_photo upimg-div clearfix">
                    <section class="z_file fl">
                      <img src="/tuyin/images/img/a11.png" class="add-img">
                      <input type="file" name="uploads[]" id="picfile" class="file"  accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
                    </section>
                  </div>
                </section>
              </div>
              <aside class="mask works-mask">
                <div class="mask-content">
                  <p class="del-p">您确定要删除该图片吗？</p>
                  <p class="check-p">
                    <span class="del-com wsdel-ok">确定</span>
                    <span class="wsdel-no">取消</span>
                  </p>
                </div>
              </aside>

            </div>

          </div>
          <div class="modal-footer">
            <!-- 
            html新增属性：placeholder autofocus autocomplete multiple form

            form="form"给表单元素添加，允许写到form的外面
          -->
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <input type="submit" class="btn btn-primary" name="uploadpic" value="上传">
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="/tuyin/lib/jquery/jquery.js"></script>
  <script src="/tuyin/lib/lightbox2-master/dist/js/lightbox-plus-jquery.min.js"></script>
  <script src="/tuyin/lib/jquery-fileupload/jquery.ui.widget.js"></script>
  <script src="/tuyin/lib/jquery-fileupload/jquery.fileupload.js"></script>
  <script src="/tuyin/lib/bootstrap/js/bootstrap.js"></script>
  <script src="/tuyin/lib/jquery_lazyload/jquery.lazyload.min.js"></script>
  <script src="/tuyin/lib/jquery_lazyload/jquery.scrollstop.min.js"></script>
  <script src="/tuyin/lib/bootstrap-validator/js/bootstrapValidator.js"></script>
  <script src="/tuyin/lib/bootstrap-paginator/bootstrap-paginator.js"></script>
  <script src="/tuyin/lib/nprogress/nprogress.js"></script>
  <script src="/tuyin/lib/imgUp/imgUp/js/imgUp.js"></script>

  <!-- 1.引包 -->
  <script src="/tuyin/js/common.js"></script>
  <script src="/tuyin/js/second2.js"></script>
 

<script type="text/javascript">
$(function(){
   $("#startdownload").click(function(){
      var imageUrlList = new Array();
      $(".downloadcheckbox").each(function(){
         if($(this).prop('checked')){
            imageUrlList.push($(this).attr('data-src'));
         } 
      });
      if(imageUrlList.length<=0 ){
          alert("打包前请选择图片!");
          return false;
      }
      var input_html='';
      for(var i=0;i<imageUrlList.length;i++){
          input_html +="<input type='hidden' name='imageUrls[]' value='"+imageUrlList[i]+"'/>";
      }
      $(".image-form-main").append(input_html);
      $(".image-form-main").submit();
   }); 
   
});

</script>

<script>
    // 10  滚动加载

    var page=2;
    var finished=0;
    var sover=0;

    //如果屏幕未到整屏自动加载下一页补满
    var setdefult=setInterval(function (){
        if(sover==1)
            clearInterval(setdefult);
        else if($(".piclist").height()<$(window).height())
            loadmore($(window));
        else
            clearInterval(setdefult);
    },500);

    //加载完
    function loadover(){
        if(sover==1)
        {
            var overtext="Duang～到底了";
            $(".loadmore").remove();
            if($(".loadover").length>0)
            {
                $(".loadover span").eq(0).html(overtext);
            }
            else
            {
                var txt='<div class="loadover"><span>'+overtext+'</span></div>'
                $("body").append(txt);
            }
        }
    }

    var vid=0;
     function loadmore(obj){
        if(finished==0 && sover==0)
        {
        var scrollTop = $(obj).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(obj).height();
        if (scrollTop + windowHeight -scrollHeight<=50 ) {
        //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作

        //防止未加载完再次执行
        finished=1;
       // var result = "";
//        // 一次加载5个
//       
//        for(var i = 0; i < 10; i++){
//        vid++;
//        result+='<li>'
//        +'<a href="" data-lightbox="image-1" data-title="My caption1">'
//        + '<img src="./images/1.jpg" alt="" data-original="./images/1.jpg">'
//        +'</a>'
//        +'<div class="imginfo">'
//        +' <p>名称:图片test</p>'
//        +' <span>上传日期:2018-1-29</span>'
//        +'<input type="checkbox" class="downloadcheckbox" data-src="./images/1.jpg">'
//        +'</div>'
//        +'</li>'
//        }
        var url="/image/index";
        var image_path="<?= $IMAGE_PATH ?>"
        var order = "<?= $order ?>"
        $.ajax({
            type: "GET",
            url: url,
            data: {page:page,order:order},
            dataType: "json",
            success: function (data) {
              if(data.code==0){
                  var result = "";
                  for(var i=0;i<data.data.length;i++){
                        result+='<li>'
                        +'<a href="'+image_path+data.data[i].imgurl+'" data-lightbox="'+data.data[i].imgurl+'" data-title="'+data.data[i].imgname+'">'
                        + '<img src="'+image_path+data.data[i].imgurl+'"  data-original="'+data.data[i].imgurl+'">'
                        +'</a>'
                        +'<div class="imginfo">'
                        +' <p>名称:'+data.data[i].imgname+'</p>'
                        +' <span>上传日期:'+data.data[i].uptime+'</span>'
                        +'<input type="checkbox" class="downloadcheckbox" data-src="'+data.data[i].imgurl+'">'
                        +'</div>'
                        +'</li>';
                  }
                 setTimeout(function(){
                    //$(".loadmore").remove();
                    $('.piclist').append(result);
                    page+=1;
                    finished=0;
                    //最后一页
                    if(page==100)
                    {
                        sover=1;
                        loadover();
                    }
                  },1000);
              }else{
                 sover=1;
                 loadover();
                alert('数据已加载完成!');
              }
            },
           error: function (err) {
                alert('网络请求超时， 请稍后重试!');
             }
        });
       
      
        }
        }
    }
    //页面滚动执行事件
    $(window).scroll(function (){
      loadmore($(this));
    });
 
 $(function(){
     var order="<?= $order; ?>";
     if(order=='uptime desc'){
       $(".sortcase").html('上传时间倒序');  
     }else{
       $(".sortcase").html('上传时间正序');  
     }
    $(".sortoption").find('li').click(function(){
      var txt =$(this).find('a').text();
      var sort = $(this).find('a').attr('data-sort');
      $(".sortcase").html(txt);
     window.location.href='/image?order='+sort;
    });
 });
      
</script>

<?php
Modal::begin([
    'id' => 'create-picture-modal',
    'header' => '<h4 class="modal-title">图片上传</h4>',
    'footer' => '',
    'options' => [
        'tabindex' => false
    ]
]);
Modal::end();
?>

<script>
  $(function(){
      var url = '/image/uploader'
      $("#data-picture-create").click(function(){   
        $('#create-picture-modal').find('.modal-body').html('');
        $.get(url,function (data) {
                $('#create-picture-modal').find('.modal-body').html(data);
            }
        );
   });
  })
</script>

</body>
</html>